import './user.css';
import React, {useEffect} from 'react';
import {Avatar, Button, List, Popconfirm, Skeleton, Space, Tag} from 'antd';

import {observer} from "mobx-react-lite";
import {SyncItem} from "../interface";
import {SyncStore} from "../stores/sync";


const SyncList = observer(() => {
    const store = SyncStore();
    const {dataList, loading, showModal, currentRecord} = store;

    useEffect(() => {
        console.log("模拟componentDidMount，即只运行一次该函数");
        queryList()
    }, [store]);

    const deleteSync = (record: any) => {
        console.log('delete', record);
        // store.deleteSync(record.id).then(() => {
        //     queryList();
        // });
    };
    const updateSync = (record: any) => {
        console.log('updateSync', record);
        // const currentRecord = {"id": record.id, "name": record.name, "age": record.age, "address": record.address};
        // store.openModal(true, currentRecord);
        store.updateSync(record.id, record).then(() => {
            // queryList();
        });
    };

    const openModal = () => {
        store.openModal(true);
    };
    const queryList = () => {
        store.changeLoading(true);
        store.fetchSyncs();
        store.changeLoading(false);
    }
    const openSync = () => {
        store.changeLoading(true);
        store.openSync();
        store.changeLoading(false);
    }

    const onLoadMore = () => {
    };
    const loadMore = null;

    return (<>
            <Space style={{marginBottom: 1}}>
                <Tag color="magenta">存在用户：{store.syncCount}</Tag>
                {/*<Button type="primary" style={{marginRight: 10, paddingRight: 10}} onClick={openModal}>新增</Button>*/}
                <Button type="primary" style={{marginRight: 10, paddingRight: 10}} onClick={queryList}>刷新设备</Button>
                <Button type="primary" style={{marginRight: 10, paddingRight: 10}} onClick={openSync}>开启同步服务</Button>
            </Space>
            <List
                className="demo-loadmore-list"
                loading={loading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={dataList}
                renderItem={(item: SyncItem, index) => (
                    <List.Item
                        actions={[
                            <Button type="primary" onClick={() => updateSync(item)}>同步</Button>,
                        //     <Popconfirm
                        //         title="是否删除"
                        //         description="您确定要删除此用户?"
                        //         onConfirm={() => deleteSync(item)}
                        //         okText="确认"
                        //         cancelText="取消"
                        //     >
                        //         <Button danger>删除</Button>
                        //     </Popconfirm>
                        ]}
                    >
                        <Skeleton avatar title={false} loading={item.loading} active>
                            <List.Item.Meta
                                avatar={item.serialNumber}
                                title={item.productName}
                                description={item.manufacturerName}
                            />
                            <div>
                                <Tag color={item.ip ? 'green' : ''}>
                                    {item.ip}
                                </Tag>
                            </div>
                            <div>
                                <Tag color={item.port ? 'green' : ''}>
                                    {item.port}
                                </Tag>
                            </div>
                        </Skeleton>
                    </List.Item>
                )}
            />
        </>
    )
});

export default SyncList;
